<template>
  <div class="container">
    <el-card class="box-card">
      <!-- 跳转来的面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right" v-if="routeData.id">
        <el-breadcrumb-item :to="{ path: 'list' }">学科管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{ routeData.name }}</el-breadcrumb-item>
        <el-breadcrumb-item>标签管理</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 分割线 -->
      <el-divider v-if="routeData.id"></el-divider>

      <!-- 头部搜索输入框 -->
      <el-row>
        <el-form ref="form" :model="form" label-width="80px">
          <el-col :span="5">
            <el-form-item label="标签名称" prop="tagName">
              <el-input
                v-model="form.tagName"
                placeholder="请输入"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="5"
            ><el-form-item label="状态" prop="state">
              <el-select v-model="form.state" placeholder="请选择">
                <el-option
                  v-for="item in arr"
                  :key="item.id"
                  :value="item.id"
                  :label="item.val"
                />
              </el-select> </el-form-item
          ></el-col>
          <el-col v-if="routeData.id" :span="10"
            ><el-form-item label-width="20px">
              <el-button @click="clearSearch">清除</el-button>
              <el-button type="primary" @click="onSearch">搜索</el-button>
            </el-form-item></el-col
          >
          <el-col v-else :span="12"
            ><el-form-item label-width="20px">
              <el-button @click="clearSearch">清除</el-button>
              <el-button type="primary" @click="onSearch">搜索</el-button>
            </el-form-item></el-col
          >
        </el-form>
        <div v-if="routeData.id">
          <el-col :span="2">
            <el-button
              type="text"
              icon="el-icon-back"
              @click="$router.push('list')"
              style="font-size: 16px"
            >
              返回学科</el-button
            ></el-col
          >
          <!-- 新增按钮 -->
          <el-col :span="2">
            <el-button type="success" icon="el-icon-edit" @click="addTags"
              >新增标签</el-button
            ></el-col
          >
        </div>
        <!-- 新增按钮 -->
        <el-col :span="2" v-else>
          <el-button type="success" icon="el-icon-edit" @click="addTags"
            >新增标签</el-button
          ></el-col
        >
      </el-row>

      <!-- 提示总数据 -->
      <el-alert :title="alertText" type="info" show-icon class="el-alert">
      </el-alert>

      <!-- 数据表格 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" :index="indexMethod" label="序号">
        </el-table-column>
        <el-table-column prop="subjectName" label="所属学科"> </el-table-column>
        <el-table-column prop="tagName" label="标签名称"> </el-table-column>
        <el-table-column prop="username" label="创建者"> </el-table-column>
        <el-table-column prop="addDate" label="创建日期" width="200">
          <template v-slot="{ row }">
            {{ row.addDate | parseTimeByString() }}
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态" :formatter="state">
        </el-table-column>
        <el-table-column label="操作" width="230">
          <template v-slot="{ row }">
            <el-button type="text" @click="disable(row)">{{
              row.state ? '禁用' : '启用'
            }}</el-button>
            <el-button type="text" :disabled="!!row.state" @click="editTag(row)"
              >修改</el-button
            >
            <el-button type="text" :disabled="!!row.state" @click="delTag(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页功能 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="q.page"
        :page-sizes="[2, 3, 5, 10]"
        :page-size="q.pagesize"
        :total="total"
        layout="total,sizes, prev, pager, next, jumper"
      >
      </el-pagination>
    </el-card>

    <!-- 新增标签的dialog -->
    <tagDialog
      :routeData="routeData"
      :dialogVisible.sync="dialogVisible"
      :tagsAddForm="tagsAddForm"
      @closed="closed"
      @getTagList="getTagList"
    />
  </div>
</template>

<script>
import tagDialog from '../components/tags-add'
import { list, remove, detail, changeState } from '@/api/hmmm/tags.js'
export default {
  name: 'tags',
  components: {
    tagDialog
  },
  data () {
    return {
      form: {
        tagName: '',
        state: null
      },
      alertText: '',
      tableData: [],
      q: {
        page: 1,
        pagesize: 5,
        tagName: null,
        subjectID: null,
        state: null
      },
      total: 0,
      arr: [
        { id: 0, val: '已禁用' },
        { id: 1, val: '已启用' }
      ],
      dialogVisible: false,
      // 新增和修改需要的数据
      tagsAddForm: {
        id: '',
        subjectID: '',
        tagName: ''
      },
      buttonState: {
        id: '',
        state: ''
      },
      routeData: {
        id: this.$route.query.id,
        name: this.$route.query.name
      }
    }
  },

  created () {
    if (this.routeData.id) {
      // console.log(this.routeData.id)
      this.q.page = 1
      this.q.subjectID = this.routeData.id
      this.getTagList()
    } else {
      // console.log(this.routeData.id)
      this.getTagList()
    }
  },

  methods: {
    // 获取全部标签列表
    async getTagList () {
      const {
        data: { counts, items }
      } = await list(this.q)
      // console.log(items)
      this.tableData = items
      this.total = counts
      this.alertText = `共有${counts}条数据`
    },

    // 修改后台状态为文字
    state (row, column, cellValue, index) {
      // console.log(row, column, cellValue, index)
      return this.arr[cellValue].val
    },

    // 每页条数改变
    handleSizeChange (val) {
      this.q.pagesize = val
      this.q.page = 1
      this.getTagList()
    },

    // 当前页改变
    handleCurrentChange (val) {
      this.q.page = val
      this.getTagList()
    },

    // 排列序号
    indexMethod (index) {
      return (this.q.page - 1) * this.q.pagesize + index + 1
    },

    // 点击清除
    clearSearch () {
      this.form = {
        tagName: '',
        state: null
      }
    },
    // 点击搜索筛选
    onSearch () {
      this.q.page = 1
      this.q.tagName = this.form.tagName
      this.q.state = this.form.state
      this.getTagList()
      // this.clearSearch()
    },

    // 删除标签
    delTag (row) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', { type: 'warning' }).then(async () => {
        await remove(row)
        this.$message.success('删除成功')
        if (this.q.page > 1 && this.tableData.length === 1) {
          this.q.page--
        }
        this.getTagList()
      }).catch(_ => _)
    },

    // 新增目录按钮
    addTags () {
      this.dialogVisible = true
    },
    // dialog关闭后的回调
    closed () {
      this.tagsAddForm = {
        id: '',
        subjectID: '',
        tagName: ''
      }
    },
    // 修改标签
    async editTag (row) {
      this.dialogVisible = true
      // console.log(row)
      const { data: res } = await detail(row)
      // console.log(res)
      this.tagsAddForm = res
    },

    // 禁用按钮
    async disable (row) {
      // console.log(row)
      if (row.state) {
        this.buttonState.id = row.id
        this.buttonState.state = 0
        await changeState(this.buttonState)
      } else {
        this.buttonState.id = row.id
        this.buttonState.state = 1
        await changeState(this.buttonState)
      }
      this.getTagList()
    }
  }
}
</script>

<style scoped lang="scss">
.box-card {
  width: 100%;
  // 头部
  .el-alert {
    margin: 15px 0;
  }

  // 分页
  .el-pagination {
    margin: 20px 0;
    text-align: right;
  }
}
::v-deep {
  .el-breadcrumb__inner.is-link {
    color: #000;
  }
}
</style>
